<template>
  <div :class="`${prefixCls}-config-list`">
    <a-radio-group v-model:value="type">
      <div class="item">
        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">{{ t('everyMonth') }}</a-radio>
      </div>
      <div class="item">
        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">{{ t('range') }}</a-radio>
        <span> {{ t('rangefrom') }} </span>
        <a-select ref="select" v-model:value="valueRange.start" v-bind="typeRangeAttrs" style="width: 110px">
          <a-select-option v-for="item in mothList" :value="item.value" :key="item.label">{{ item.label }}</a-select-option>
        </a-select>
        <!-- <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" /> -->
        <span> {{ t('rangetoM') }} </span>

        <a-select ref="select" v-model:value="valueRange.end" v-bind="typeRangeAttrs" style="width: 110px">
          <a-select-option v-for="item in mothList" :value="item.value" :key="item.label">{{ item.label }}</a-select-option>
        </a-select>
        <!-- <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" /> -->
        <span> {{}} </span>
      </div>
      <div class="item">
        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">{{ t('loop') }}</a-radio>
        <span> {{ t('loopfrom') }} </span>
        <a-select ref="select" v-model:value="valueLoop.start" v-bind="typeLoopAttrs" style="width: 110px">
          <a-select-option v-for="item in mothList" :value="item.value" :key="item.label">{{ item.label }}</a-select-option>
        </a-select>
        <!-- <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" /> -->

        <span>{{ t('looptoM') }}</span>
        <!-- <a-select ref="select" v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" style="width: 110px">
          <a-select-option v-for="item in mothList" :value="item.value" :key="item.label">{{ item.label }}</a-select-option>
        </a-select> -->
        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
        <span> {{ t('loopendM') }} </span>
      </div>
      <div class="item">
        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">{{ t('specify') }}</a-radio>
        <div class="list">
          <a-checkbox-group v-model:value="valueList">
            <template v-for="i in specifyRange" :key="i">
              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
            </template>
          </a-checkbox-group>
        </div>
      </div>
    </a-radio-group>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { InputNumber } from 'ant-design-vue';
  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
  import { useI18n } from '/@/hooks/web/useI18n';

  export default defineComponent({
    name: 'MonthUI',
    components: { InputNumber },
    props: useTabProps({
      defaultValue: '*',
    }),
    emits: useTabEmits(),
    setup(props, context) {
      const { t: common } = useI18n('common');
      const { t, isCN } = useI18n('component.easyCron');
      const mothList = isCN
        ? [
            { label: '1月', value: 1 },
            { label: '2月', value: 2 },
            { label: '3月', value: 3 },
            { label: '4月', value: 4 },
            { label: '5月', value: 5 },
            { label: '6月', value: 6 },
            { label: '7月', value: 7 },
            { label: '8月', value: 8 },
            { label: '9月', value: 9 },
            { label: '10月', value: 10 },
            { label: '11月', value: 11 },
            { label: '12月', value: 12 },
          ]
        : [
            { label: 'January', value: 1 },
            { label: 'February', value: 2 },
            { label: 'March', value: 3 },
            { label: 'April', value: 4 },
            { label: 'May', value: 5 },
            { label: 'June', value: 6 },
            { label: 'July', value: 7 },
            { label: 'August', value: 8 },
            { label: 'September', value: 9 },
            { label: 'October', value: 10 },
            { label: 'November', value: 11 },
            { label: 'December', value: 12 },
          ];
      return {
        ...useTabSetup(props, context, {
          defaultValue: '*',
          minValue: 1,
          maxValue: 12,
          valueRange: { start: 1, end: 12 },
          valueLoop: { start: 1, interval: 1 },
        }),
        common,
        t,
        mothList,
      };
    },
  });
</script>
